<template>
    <view :style="{ '--color': color }">
        <navBar :Back="false" city :bgMake="5" :title="title"></navBar>
        <Bannel :pageData="pageData.bannerData"></Bannel>
        <Navigation :pageData="pageData.menuData"></Navigation>
        <u-sticky :customNavHeight="totalHeight">
            <view class="NavFiexd">
                <view class="flex-1">
                    <u-tabs :list="list1" :lineColor="color" :itemStyle="itemStyle" :lineWidth="24" :activeStyle="activeStyle" @click="click"></u-tabs>
                </view>
                <view class="d-flex a-center color" @click="show = true">
                    <text class="size30">相亲条件</text>
                    <view class="iconfont icon-xiangxia bold size32 m-left10"></view>
                </view>
            </view>
        </u-sticky>

        <List :pageData="List"></List>

        <view class="masking" v-if="show" @click.stop="show = false">
            <u-popup :show="true" mode="top" safeAreaInsetTop :safeAreaInsetBottom="false">
                <view class="popup" :style="{ 'padding-top': `${navHeight}px` }">
                    <view class="popScroll">
                        <view class="Search">
                            <view class="iconfont icon-a-zu3618 color_cc size32"></view>
                            <input type="text" v-model="sn_id" class="flex-1 height size26 color_33 p-left20" placeholder="请输入ID搜索" placeholder-class="place" />
                        </view>
                        <block v-for="(item, index) in filterData" :key="index">
                            <view class="Screen">
                                <text class="black size28">{{ item.title }}</text>
                                <view class="row">
                                    <view class="ScreenList" @click="selectFilt(index, '')" :class="{ active: !item.val }">不限</view>
                                    <view class="ScreenList" :class="{ active: item.val == sItem }" @click="selectFilt(index, sItem)" v-for="(sItem, sIndex) in item.range" :key="sIndex">
                                        {{ sItem }}
                                    </view>
                                </view>
                            </view>
                        </block>
                    </view>
                    <view class="popConfig">
                        <view class="Reset" @click="Reset">
                            <view class="iconfont icon-reset color size30"></view>
                            <text class="color_99 size28 m-top10">重置</text>
                        </view>
                        <view class="continum" @click="Continue">确定</view>
                    </view>
                </view>
            </u-popup>
        </view>

        <connection></connection>
        <!-- <homeAgree :showAgree="showAgree" @Control="Control"></homeAgree> -->
        <homeAgree></homeAgree>
        <Load v-if="!pageData"></Load>

        <!-- #ifdef MP-WEIXIN -->
        <view class="service" @touchmove="buttonMove" @touchstart="buttonStart" :style="{ top: `${buttonTop}px`, left: `${buttonLeft}px` }">
            <button open-type="contact" class="serviceBtn"></button>
            <view class="iconfont icon-kefu2 white size64"></view>
        </view>
        <!-- #endif -->
    </view>
</template>

<script>
    import navBar from '@/components/navBar/navBar.vue';
    import Bannel from '@/components/Bannel/Bannel.vue';
    import Navigation from '@/components/Navigation/Navigation.vue';
    import List from '@/components/List/List.vue';
    import { mapState, mapMutations } from 'vuex';
    export default {
        components: {
            navBar,
            Bannel,
            Navigation,
            List
        },
        data() {
            return {
                pageData: [],
                list1: [
                    {
                        name: '活跃',
                        order: 'views'
                    },
                    {
                        name: '精品',
                        order: 'recommend'
                    },
                    {
                        name: '实名',
                        order: 'real_name'
                    },
                    {
                        name: '最新',
                        order: 'new'
                    },
                    {
                        name: '已支付',
                        order: 'pay'
                    }
                ],
                current: 0,
                itemStyle: {
                    height: '36px'
                },
                activeStyle: {
                    fontWeight: 'bold',
                    fontSize: '30rpx',
                    transform: 'scale(1.04)'
                },
                inactiveStyle: {
                    transform: 'scale(1)'
                },
                show: false,
                page: 1,
                limit: 10,
                order: 'views',
                sn_id: '',

                v_sex: '',
                education: '',
                salary: '',
                marital: '',
                getMore: true,
                List: [],
                filterData: [],
                buttonTop: 500,
                buttonLeft: 330,
                startPoint: ''
            };
        },
        onLoad() {
            this.getActs();
            this.getMembers();
            this.articleInfo();
            this.getFilter();
            this.activeStyle['color'] = this.color;
        },
        onShow() {
            // #ifdef H5
            let param = `share_v_id=${this.vid}`;
            this.$H5Share(param);
            // #endif
            this.$BarTitle(this.title);
        },

        methods: {
            ...mapMutations(['getUser', 'setAgree', 'SeletCity']),
            buttonMove(e) {
                const endPoint = e.touches[e.touches.length - 1];
                const translateX = endPoint.clientX - this.startPoint.clientX;
                const translateY = endPoint.clientY - this.startPoint.clientY;
                this.startPoint = endPoint;
                let buttonTop = this.buttonTop + translateY;
                let buttonLeft = this.buttonLeft + translateX;
                if (buttonLeft + 40 >= this.System.windowWidth) buttonLeft = this.System.windowWidth - 40;
                if (buttonLeft <= 0) buttonLeft = 0;
                if (buttonTop + 40 >= this.System.windowHeight) buttonTop = this.System.windowHeight - 40;
                if (buttonTop <= 0) buttonTop = 0;
                this.buttonTop = buttonTop;
                this.buttonLeft = buttonLeft;
            },
            buttonStart(e) {
                //获取鼠标开始点
                this.startPoint = e.touches[0];
            },

            getActs() {
                this.$http
                    .get({
                        url: '/WeddingApi/getActs'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        if (result.is_hidden) this.getUser({ is_hidden: result.is_hidden });
                        this.pageData = result;
                        this.SeletCity(result.city);
                    });
            },
            getMembers() {
                let data = {
                    page: this.page,
                    limit: this.limit,
                    order: this.order,
                    sn_id: this.sn_id
                };
                if (this.filterData.length) {
                    this.filterData.forEach((item) => {
                        data[item.key] = item.val;
                    });
                }
                this.$http
                    .get({
                        url: '/WeddingApi/getMembers',
                        data
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data.list || [];
                        this.page == 1 ? (this.List = result) : (this.List = this.List.concat(result));
                        if (result.length < this.limit) this.getMore = false;
                    });
            },
            click(e) {
                this.order = e.order;
                this.current = e.index;
                this.page = 1;
                this.getMore = true;
                this.getMembers();
            },
            Continue() {
                this.page = 1;
                this.getMore = true;
                this.show = false;
                this.getMembers();
            },
            getFilter() {
                this.$http
                    .post({
                        url: '/WeddingApi/getFilter'
                    })
                    .then((res) => {
                        if (res.code != '100') return;
                        const result = res.data || [];
                        result.forEach((item, index) => {
                            item.val = '';
                        });
                        this.filterData = result;
                    });
            },
            selectFilt(index, sItem) {
                this.filterData[index].val = sItem;
            },
            Reset() {
                this.filterData.forEach((item) => {
                    item.val = '';
                });
                this.sn_id = '';
            },
            articleInfo() {
                this.$http
                    .post({
                        url: '/zzjApp/articleInfo',
                        data: {
                            website_article_id: 32728
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '00000') return;
                        this.getUser({
                            articleInfo: res.data
                        });
                    });
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.getMembers();
        },
        watch: {
            City(newVal, oldVal) {
                if (!newVal) return;
                this.page = 1;
                this.getMore = true;
                this.getMembers();
            }
        },
        computed: {
            ...mapState(['totalHeight', 'color', 'navHeight', 'title', 'share', 'agreement', 'vid', 'City', 'System'])
        },

        onShareAppMessage() {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/startUp/startUp?share_v_id=${this.vid}`,
                imageUrl: share.imageUrl
            };
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $pageBg;
    }
</style>
<style lang="scss" scoped>
    .NavFiexd {
        width: 100%;
        height: 80rpx;
        padding: 0 30rpx 0 18rpx;
        background-color: $pageBg;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .popup {
        width: 100%;
        min-height: 500rpx;
        height: 1100rpx;
        display: flex;
        flex-direction: column;
    }

    .popScroll {
        flex: 1;
        padding-left: 30rpx;
        overflow: scroll;
    }

    .Search {
        width: 690rpx;
        height: 80rpx;
        margin: 20rpx 0;
        background-color: $pageBg;
        border-radius: 10rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
    }

    .Screen {
        width: 100%;
        margin-bottom: 30rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid $pageBg;
        display: flex;
        flex-direction: column;
    }

    .ScreenList {
        width: 216rpx;
        height: 60rpx;
        padding: 0 10rpx;
        background-color: $pageBg;
        color: #333;
        font-size: 26rpx;
        border-radius: 30rpx;
        margin-top: 20rpx;
        margin-right: 20rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-align: center;
        line-height: 60rpx;
    }

    .ScreenList:nth-child(3n) {
        margin-right: 0;
    }

    .active {
        background-color: var(--color);
        color: #ffffff;
        // color: var(--color);
    }

    .popConfig {
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        background-color: #ffffff;
    }

    .continum {
        flex: 1;
        height: 80rpx;
        margin-right: 30rpx;
        border-radius: 40rpx;
        box-sizing: border-box;
        background-color: var(--color);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 30rpx;
    }

    .Reset {
        width: 120rpx;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .service {
        width: 80rpx;
        height: 80rpx;
        background-color: rgba(255, 101, 1, 0.8);
        border-radius: 50%;
        position: fixed;

        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .serviceBtn {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        background-color: transparent;
        border: none;
    }

    .serviceBtn::after {
        border: none;
    }
</style>
